<template>
	<view>
		<view class="container">
			<image class="m-backdrop" src="/static/icon/icon_back5.png" mode="widthFix"></image>
			<view class="m-header">
				<image class="m-backdrop" src="/static/icon/icon_back5.png" mode="widthFix"></image>
				<view class="g-custom-nav flex-box plr30" :style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
					<image @click="back()" class="icon-back mr15" src="../../static/icon/arrow_back.png" mode="aspectFit"></image>
					<view class="col-f fs36 flex-1 tc" style="padding-right: 70rpx;">签到</view>
				</view>
			</view>
			<!--  -->
			<view class="pr plr30 pb40" :style="{ paddingTop: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
				<view class="points-box mt20 mb40">
					<image class="img-back" src="/static/icon/back_star.png" mode="aspectFill"></image>
					<view class="inner flex-box plr30">
						<view class="flex-1">
							<view class="fs24 col-9 mb15">我的积分</view>
							<view class="fs50 col-red fwb">{{score}}</view>
						</view>
						<view class="btn">
							<image src="/static/icon/btn_sign.png" mode="aspectFill"></image>
							<view @click="sign" class="btn-text">立即签到</view>
						</view>
				<!-- 		<view class="btn">
							<image src="/static/icon/btn_reward.png" mode="aspectFill"></image>
							<view class="btn-text">积分抽奖</view>
						</view> -->
					</view>
				</view>
				<!--  -->
				<view class="sign-box p30 mb35">
					<view class="flex-box mb15 fs32">
						<view class="col-3 mr10">已连续签到</view>
						<view class="col-red fwb">{{seriesDays}}天</view>
					</view>
					<view class="flex-box mb30 fs20">
						<view class="col-9 mr5">{{todaySignStatus?'明日':'今日'}}签到可获得</view>
						<view class="col-red">{{signScore}}积分</view>
					</view>
					<view class="flex-box flex-between fs24 col-9 tc">
						<view v-for="(item,index) in weekSignLists">
							<image v-if="item.sign_status" class="icon-circle" src="/static/icon/cirlce_selected1.png" mode="aspectFit"></image>
							<image v-else class="icon-circle" src="/static/icon/circle_normal1.png" mode="aspectFit"></image>
							<view class="">{{item.name}}</view>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="pt40 plr30">
					<view class="course-tab flex flex-align-start mb20">
						<view class="tab-item flex-1" :class="{ active: pointsTabCurrent === 0 }" @click="pointsTabClick(0)">积分收入</view>
						<view class="line mt5"></view>
						<view class="tab-item flex-1" :class="{ active: pointsTabCurrent === 1 }" @click="pointsTabClick(1)">积分支出</view>
					</view>
					<!--  -->
					<view class="ptb30 m-hairline--bottom flex-box" v-for="(item,index) in pointLists" :key="item.id">
						<view class="flex-1">
							<view class="fs30 col-3 mb20">{{item.memo}}</view>
							<view class="fs24 col-9">{{item.createtime}}</view>
						</view>
						<view class="fwb col-red">
							<text class="fs24" v-if="item.score>0">+</text>
							<text class="fs30">{{item.score}}</text>
						</view>
					</view>
					<view class="g-btn3-wrap">
						<view class="g-btn3"  :class="{nomore: pointListsMore.nomore == true || pointListsMore.loading == true}" @click="fetch">{{pointListsMore.text}}</view>
					</view>
				</view>
				<!--  -->
			</view>
		</view>
		<!--  -->
		<uni-popup ref="signPopup" type="center">
			<view class="sign-pop" catchtouchmove="true">
				<image class="img-back" src="/static/icon/icon_back6.png" mode="aspectFit"></image>
				<view class="content tc">
					<view class="fs48 fwb col-f mb25">每日签到</view>
					<view class="status">已连续签到{{seriesDays}}天</view>
					<view class="sign-day flex-box flex-between tc">
						<view class="day-item" :class="item.sign_status?'active':''" v-for="(item,index) in weekSignLists">
							<view class="day">{{item.date}}</view>
							<image class="icon-right" src="/static/icon/icon_right.png" mode="aspectFit"></image>
							<image class="icon-points" src="/static/icon/icon_points.png" mode="aspectFit"></image>
						</view>
					</view>
				<view class="btn-sign" @click="signPopClose" >{{todaySignStatus?'明日':'今日'}}签到打卡领取{{signScore}}积分</view>
				</view>
				<image class="icon_coin1" src="/static/icon/icon_coin1.png" mode="aspectFit"></image>
				<image class="icon_coin2" src="/static/icon/icon_coin2.png" mode="aspectFit"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const util = require('@/xiluedu/util.js');
export default {
	data() {
		return {
			seriesDays:0,
			score:0,
			signScore:0,
			todaySignStatus: false,
			weekSignLists:[],
			statusBarHeight: 20,
			pointsTabCurrent: 0,
			pointLists:[],
			pointListsMore:{page:1}
		};
	},
	onLoad() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		this.weekSign();
		this.fetch();
	},
	methods: {
		
		weekSign(){
			this.$core.get({url:'xiluedu.sign/week_sign',data:{},success:(ret)=>{
				 this.seriesDays = ret.data.series_days;
				 this.score = ret.data.score;
				 this.signScore = ret.data.sign_score;
				 this.todaySignStatus = ret.data.today_sign_status;
				 this.weekSignLists = ret.data.sign;
			}});
		},
		//签到
		sign(){
			this.$core.post({url:'xiluedu.sign/sign',data:{},success:(ret)=>{
				 this.weekSign();
				 this.signPopOpen();
			}});
		},
		fetch() {
		
		    util.fetch(this, 'xiluedu.user/score_lists', {tab:this.pointsTabCurrent,pagesize:10}, 'pointListsMore', 'pointLists', 'data', data=>{
		      this.total = data.total;
		    })
		},
		
		refresh(){
			this.pointLists = [];
			this.pointListsMore = {page:1};
			this.fetch();
		},
		// 点击明细tab
		pointsTabClick(i) {
			this.pointsTabCurrent = i;
			this.refresh();
		},
		
		signPopOpen() {
			this.$refs.signPopup.open();
		},
		signPopClose() {
			this.$refs.signPopup.close();
		},
		back(){
			uni.navigateBack({
			})
		},
	}
};
</script>

<style scoped>
.points-box {
	position: relative;
	width: 100%;
	height: 200rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.points-box .img-back {
	display: block;
	width: 100%;
	height: 100%;
}
.points-box .inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.points-box .btn {
	position: relative;
	margin: 0 0 0 30rpx;
}
.points-box .btn image {
	display: block;
	width: 160rpx;
	height: 72rpx;
	border-radius: 99rpx;
}
.points-box .btn-text {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-size: 26rpx;
	color: #ffffff;
	line-height: 72rpx;
	text-align: center;
}
/*  */
.sign-box{
	background-color: #fff;
	border-radius: 10rpx;
}
.sign-box .icon-circle {
	margin: 0 auto 12rpx;
	display: block;
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
}

.course-tab .tab-item {
	position: relative;
	height: 70rpx;
	text-align: center;
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
}
.course-tab .tab-item.active {
	font-size: 36rpx;
}
.course-tab .tab-item.active:before {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	width: 250rpx;
	height: 5rpx;
	border-radius: 3rpx;
	background: var(--red);
}
.course-tab .line {
	width: 1rpx;
	height: 31rpx;
	background: #e1e1e1;
}
/*  */
.sign-pop {
	position: relative;
	width: 462rpx;
	height: 601rpx;
}
.sign-pop .img-back {
	display: block;
	width: 462rpx;
	height: 601rpx;
}
.sign-pop .content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.sign-pop .icon_coin2 {
	position: absolute;
	top: -70rpx;
	left: -10rpx;
	display: block;
	width: 120rpx;
	height: 120rpx;
}
.sign-pop .icon_coin1 {
	position: absolute;
	top: 205rpx;
	left: 100rpx;
	display: block;
	width: 78rpx;
	height: 78rpx;
}
.sign-pop .content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 70rpx 30rpx 0;
}
.sign-pop .status {
	margin: 0 auto 155rpx;
	width: 200rpx;
	height: 48rpx;
	background: #ffffff;
	border-radius: 24rpx;
	font-size: 24rpx;
	font-weight: bold;
	color: #ed1f34;
	text-align: center;
	line-height: 48rpx;
}
.sign-pop .sign-day{
	margin: 0 0 50rpx;
}

.sign-pop .day-item{
	padding-top: 5rpx;
	width: 50rpx;
	height: 72rpx;
	border: 2rpx solid #ED1F34;
	border-radius: 10rpx;
}
.sign-pop .day-item.active{
	padding-top: 7rpx;
	background: linear-gradient(-49deg, #ED1F34, #F24682);
	border: 0;
}
.sign-pop .day{
	margin: 0 0 10rpx;
	font-size: 24rpx;
	font-weight: bold;
	color: #ED1F34;
	line-height: 28rpx;
}
.sign-pop .day-item.active .day{
	color: #FFF;
}
.sign-pop .icon-right{
	margin: 0 auto;
	display: none;
	width: 23rpx;
	height: 17rpx;
}
.sign-pop .icon-points{
	margin: 0 auto;
	display: block;
	width: 16rpx;
	height: 18rpx;
}

.sign-pop .day-item.active .icon-right{
	display: block;
}
.sign-pop .day-item.active .icon-points{
	display: none;
}
.sign-pop .btn-sign{
	width: 390rpx;
	height: 70rpx;
	background: var(--bg1);
	border-radius: 36rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	line-height: 70rpx;
}
@media only screen and (min-width: 800px){
	.points-box{
		height: 446rpx;
		border-radius: 30rpx;
	}
	.sign-box{
		border-radius: 30rpx;
	}
}
</style>
